<template>
	<div class="hotboom">
		<header>
			<div class="title">描述你的需求</div>
			<uni-easyinput type="textarea" v-model="value" placeholder="点击输入你的商品，如:啤酒一瓶" :inputBorder="false"></uni-easyinput>
			<div class="tips">
				<div class="left" @click="toChatDetail">骑手距离 1.5KM</div>
				<image @click="toRiderList" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/chat.jpg" mode="scaleToFill" />
			</div>
			<div class="desc">
				<div class="left">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/desc.jpg" mode="scaleToFill" />
					<text>骑手垫付商品费，收货后与配送员结清</text>
				</div>
				<div class="right">预估商品费 ></div>
			</div>
		</header>
		<div class="goods">
			<div class="goods-item">
				<div class="left">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/qu.jpg" mode="scaleToFill" />
					<uni-easyinput v-model="value" placeholder="在哪里买或取" :inputBorder="false" ></uni-easyinput>
				</div>
				<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg" mode="scaleToFill" @click="onAreaClick" />
			</div>
			<div class="goods-item">
				<div class="left">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/song.jpg" mode="scaleToFill" />
					<uni-easyinput v-model="value" placeholder="送到哪里去" :inputBorder="false"></uni-easyinput>
				</div>

				<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/peopel.jpg" mode="scaleToFill" />
			</div>
			<div class="goods-time">
				<span>取件时间</span>
				<div class="time">03-22 立即取件(约17:26) ></div>
			</div>
		</div>
		<div class="info">
			<span>物品信息</span>
			<div class="weight">5公斤 ></div>
		</div>
		<div class="mark">
			<span>备注</span>
			<uni-easyinput v-model="value" placeholder="请输入提示信息" :inputBorder="false"></uni-easyinput>
		</div>
		<div class="other">
			<div class="other-item">
				<span>红包</span>
				<div class="red">暂无可用红包 ></div>
			</div>
			<div class="other-item">
				<span>小费</span>
				<div class="red">加小费抢单更快哦 ></div>
			</div>
		</div>
		<div class="msg">
			<radio :value="r1" :checked="false" />
			<p>
				已阅读并同意
				<span>《跑腿服务协议》</span>
			</p>
		</div>
		<footer>
			<div class="left">
				跑腿费
				<span>￥6</span>
			</div>
			<div class="right">
				<span>明细 ^</span>
				<button>提交订单</button>
			</div>
		</footer>
		<!-- <u-select v-model="isShowArea" mode="single-column" :list="areaList" @confirm="confirm"></u-select> -->
	</div>
</template>

<script>
var app = getApp();
export default {
	components: {},
	data() {
		return {
			r1: '',
			isShowArea: false,
			areaList: []
		};
	},
	computed: {},
	methods: {
		onAreaClick() {
			this.isShowArea = true
		},
		confirm() {},
		getAreaList() {
			let that = this
			app.globalData.util.request({
				url: 'entry/wxapp/runner_region',
				success: function(res) {
					res.data.data.forEach(item => {
						item.value = `${item.province}-${item.city}-${item.district}`
						item.label = `${item.province}-${item.city}-${item.district}`
					})
					that.areaList = res.data.data
					console.log(that.areaList, 'that.areaList');
				}
			});
		},
		toRiderList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/rider/index'
			});
		},
		toChatDetail() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/chat/chatDetail/index'
			});
		}
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {
		app.globalData.setNavigationBarColor(this);
		this.appPageOnLoad(app);
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() {},
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() {
		this.getAreaList()
	},
	// 页面周期函数--监听页面隐藏
	onHide() {},
	// 页面周期函数--监听页面卸载
	onUnload() {}
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
};
</script>

<style scoped>
.hotboom {
	min-height: 100vh;
	background: #eee;
}
header,
.goods,
.info,
.mark,
.other {
	width: 95%;
	background: #fff;
	padding: 20rpx 40rpx;
	margin: 20rpx auto;
	border-radius: 20rpx;
}
header .title {
	font-weight: 600;
}
header .tips {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #eee;
}
header .tips .left {
	font-weight: 600;
	font-size: 22rpx;
	padding: 4rpx 10rpx;
	border: 1px solid red;
	border-radius: 20rpx;
	background: rgb(255, 227, 227);
}
header .tips image {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
}
header .desc {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24rpx;
	color: #706e6e;
}
header .desc .left {
	display: flex;
	align-items: center;
}
header .desc image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
	border-radius: 10rpx;
}
.goods image {
	width: 50rpx;
	height: 50rpx;
}
.goods .goods-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 1px solid #eee;
}
.goods .goods-item .left {
	display: flex;
	align-items: center;
}
.goods .goods-time {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.info,
.mark,
.other .other-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.info span,
.mark span,
.other span {
	font-weight: 600;
	font-size: 24rpx;
}
.other .other-item {
	padding: 20rpx 0;
}
.other .other-item:first-child {
	border-bottom: 1px solid #eee;
}
.msg {
	width: 95%;
	display: flex;
	align-items: center;
	margin: 10rpx auto;
	margin-bottom: 120rpx;
}
.msg p span {
	color: rgb(255, 196, 87);
}
footer {
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	padding: 0 0 0 2.5%;
	background: #fff;
}
footer .left span {
	color: red;
	font-size: 30rpx;
	font-weight: 600;
}
footer .right {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
footer .right button {
	height: 100rpx;
	width: 70%;
	border: none;
	outline: none;
	border-radius: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(242, 212, 157);
	color: #817e7e;
	margin-right: 0;
}
</style>
